<template>
  <div class="home-page">
    <el-row :gutter="20">
      <!-- 左侧充电站容器 -->
      <el-col :span="18">
        <div class="station-container">
          <h2>充电站列表</h2>
          <el-row :gutter="20" class="station-row">
            <el-col :span="8" v-for="station in stations" :key="station.id">
              <el-card
                  class="box-card"
                  shadow="hover"
                  @click="goToPiles(station.id)"
              >
                <div class="station-info">
                  <div class="station-name">📍 {{ station.stationName }}</div>
                  <div class="station-address">🏠 {{ station.address }}</div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-empty v-if="stations.length === 0" description="暂无数据" />
        </div>
      </el-col>

      <!-- 右侧示例按钮容器 -->
      <el-col :span="6">
        <div class="example-container">
          <h3>功能快捷导航</h3>
          <el-card class="example-card" @click="goToPage('dashboard')">
            📊 数据概览
          </el-card>
          <el-card class="example-card" @click="goToPage('profile')">
            👤 用户信息
          </el-card>
          <el-card class="example-card" @click="goToPage('settings')">
            ⚙️ 系统设置
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'StationList',
  setup() {
    const router = useRouter()
    const stations = ref([])

    // 获取站点数据
// 创建自定义 axios 实例
    const apiClient8080 = axios.create({
      baseURL: 'http://localhost:8080', // 指定 8080 端口
      timeout: 5000, // 设置超时时间
    });

    const fetchStations = async () => {
      try {
        const { data } = await apiClient8080.get('/station/getStationByPage?page=0&size=10');
        stations.value = data.records || []; // 确保数据格式正确
      } catch (error) {
        console.error('获取站点列表失败', error);
      }
    };

    const goToPiles = (stationId) => {
      router.push({ name: 'PileList', params: { stationId } })
    }

    const goToPage = (pageName) => {
      router.push({ name: pageName })
    }

    onMounted(() => {
      fetchStations()
    })

    return {
      stations,
      goToPiles,
      goToPage
    }
  }
}
</script>

<style scoped>
/* 页面布局样式 */
.home-page {
  padding: 20px;
}

/* 卡片样式 */
.box-card {
  margin: 10px 0;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 站点容器样式 */
.station-container h2 {
  margin-bottom: 20px;
}

/* 示例按钮容器样式 */
.example-container {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}
.example-container h3 {
  margin-bottom: 20px;
}
.example-card {
  margin: 10px 0;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.example-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 全局布局优化 */
.station-row {
  padding: 20px;
}
</style>
